<template>
  <div class="race-detail-wrap">
    <div v-loading="loading" class="race-data-container">
      <div class="base-info-data">
        <Title title="基础信息"></Title>
        <el-descriptions :column="1">
          <el-descriptions-item label="比赛开始时间">{{
            formatTime(detailInfo.startTime)
          }}</el-descriptions-item>
          <el-descriptions-item label="比赛结束时间">{{
            formatTime(detailInfo.endTime)
          }}</el-descriptions-item>
          <el-descriptions-item label="对战队伍">{{
            detailInfo.otherTeamName || "-"
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="race-result-data">
        <div class="reslut">
          <span :style="resultStyle" class="reslut-title">{{
            resultText
          }}</span>
        </div>
        <div class="score-result">
          <div class="center-box">
            <div class="score-container">
              <span>{{ detailInfo.myTeamScore }}</span>
            </div>
            <div class="maohao-container"><span>:</span></div>
            <div class="score-container">
              <span>{{ detailInfo.otherTeamScore }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="race-detail-data">
        <Title title="比赛数据"></Title>
        <el-descriptions :column="1">
          <el-descriptions-item label="犯规总数">{{
            detailInfo.foulTotalNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="助攻总数">{{
            detailInfo.assistTotalNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="过人总数">{{
            detailInfo.outstandingTotalNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="扑救总数">{{
            detailInfo.diveTotalNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="解围总数">{{
            detailInfo.helpTotalNumber
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <Title title="参赛队员"></Title>
    <div v-loading="tableLoading" class="race-player-list-container">
      <div class="list-box">
        <el-table
          style="width: 100%"
          v-loading="loading"
          :data="listData"
          border
          height="100%"
        >
          <el-table-column label="ID" prop="id" minWidth="100" />
          <el-table-column prop="name" label="姓名" minWidth="100" />
          <el-table-column prop="position" label="位置" minWidth="100">
            <template slot-scope="scope">
              <span> {{ formatPosition(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clothNumber" label="球衣号" minWidth="100" />
          <el-table-column prop="score" label="得分" minWidth="80" />
          <el-table-column prop="assistNumber" label="助攻" minWidth="80" />
          <el-table-column prop="foulNumber" label="犯规" minWidth="80" />
          <el-table-column prop="outstanding" label="过人" minWidth="80" />
          <el-table-column prop="diveNumber" label="扑救" minWidth="80" />
          <el-table-column prop="helpNumber" label="解围" minWidth="80" />

          <el-table-column
            prop="position"
            fixed="right"
            label="操作"
            minWidth="100"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleJumpToDetail(scope.row)"
                >球员详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchRaceDetailData, fetchRacePlayerListData } from "@/api/race/index";
import Title from "@/components/Title";
import moment from "moment";
import { PLAYER_POSITION } from "@/views/player/constants/index";

export default {
  name: "race-detail",
  components: { Title },
  data() {
    return {
      loading: false,
      tableLoading: false,
      detailInfo: {},
      listData: [],
    };
  },
  computed: {
    id() {
      return this.$route?.query?.id || null;
    },
    resultStyle({ detailInfo }) {
      if (
        (detailInfo.myTeamScore ?? "") === "" &&
        (detailInfo.otherTeamScore ?? "") === ""
      ) {
        return {
          backgroundColor: "#e9e9eb",
        };
      } else {
        if (detailInfo.myTeamScore === detailInfo.otherTeamScore) {
          return {
            backgroundColor: "#78aff9",
          };
        } else if (detailInfo.myTeamScore > detailInfo.otherTeamScore) {
          return {
            backgroundColor: "#7ec050",
          };
        } else if (detailInfo.myTeamScore < detailInfo.otherTeamScore) {
          return {
            backgroundColor: "#e47470",
          };
        } else {
          return {
            backgroundColor: "#e9e9eb",
          };
        }
      }
    },
    resultText({ detailInfo }) {
      if (
        (detailInfo.myTeamScore ?? "") === "" &&
        (detailInfo.otherTeamScore ?? "") === ""
      ) {
        return "-";
      } else {
        if (detailInfo.myTeamScore === detailInfo.otherTeamScore) {
          return "平        局";
        } else if (detailInfo.myTeamScore > detailInfo.otherTeamScore) {
          return "胜        利";
        } else if (detailInfo.myTeamScore < detailInfo.otherTeamScore) {
          return "失        败";
        } else {
          return "-";
        }
      }
    },
  },
  created() {
    this.requestRaceDetailData();
    this.requestRacePlayerListData();
  },
  methods: {
    /**
     * 格式化时间
     */
    formatTime(time) {
      return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : "-";
    },
    /**
     * 格式化位置
     */
    formatPosition(row) {
      return row?.position ? PLAYER_POSITION[row?.position] || "-" : "-";
    },
    /**
     * 跳转至球员详情
     */
    handleJumpToDetail(row) {
      if (!row?.id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      this.$router.push({ name: "player-detail", query: { id: row?.id } });
    },
    /**
     * 请求比赛详情数据
     */
    requestRaceDetailData() {
      this.loading = true;
      const params = {
        id: this.id,
      };
      fetchRaceDetailData(params)
        .then((res) => {
          this.loading = false;
          if (res?.code === 1) {
            this.detailInfo = res?.data || {};
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
          this.detailInfo = {};
        });
    },
    /**
     * 请求参赛队员数据
     */
    requestRacePlayerListData() {
      this.tableLoading = true;
      const params = {
        id: this.id,
      };
      fetchRacePlayerListData(params)
        .then((res) => {
          this.tableLoading = false;
          this.listData = res?.data || [];
        })
        .catch((err) => {
          console.log(err);
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.race-detail-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.race-data-container {
  width: 100%;
  height: 195px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.base-info-data {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.race-detail-data {
  width: 30%;
  height: 100%;
}
.race-result-data {
  width: 40%;
  height: 100%;
}
.reslut {
  height: 40px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.reslut-title {
  display: block;
  font-size: 20px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 4px;
  color: white;
}
.center-box {
  display: flex;
  width: 80%;
  height: 90%;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.score-result {
  height: 155px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.score-container {
  width: 40%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: 800;
}
.maohao-container {
  width: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: 800;
}
.race-player-list-container {
  flex: 1;
}
.list-box {
  width: 100%;
  height: 100%;
}
</style>
